{% extends "mweb/base.html" %}
{% load static %}

<!-- CONTENT
  =====================================================================-->

{% block content %}
 <div style="background-color: #0F0537;">
     <div class="registration_top">
         <div align="left" style="position:relative; left:10%; top:170px;">
             <a href="javascript:download_app()">
                 <img src="https://res.yyzb.com/gma/registration/download_btn.png" class="promote-img registration_download_btn clickable" />
             </a>
         </div>
     </div>

     <div class="registration_bottom" >
         <a name="download_section"> </a>
            <div align="left" style="position:relative; left:50%; margin-left: -125px; top:100px;">
            <div class="registration_input_btn">
                <input class="weui-input" type="tel" id="mobile" placeholder="请输入11位手机号码" style="margin-left:10px; width:230px; height:30px;">
            </div>
        </div>

        <div align="left" style="position:relative; left:50%; margin-left: -125px; top:120px;">
            <div class="registration_input_btn">
                <div class="form-inline row">
                    <input class="weui-input" type="tel" id="sms_code" placeholder="请输入验证码" style="margin-left:10px; width:160px; height:30px;">
                    <div class="registration_get_sms_btn clickable" id="fetch_sms_button" onClick="javascript:click_get_sms_code_btn();"> </div>
                </div>
            </div>
        </div>

        <div align="left" style="position:relative; left:50%; margin-left: -125px; top:140px;">
            <div class="clickable">
                <img src="https://res.yyzb.com/gma/registration/download_btn2.png" class="promote-img" style="width:250px;" onclick="javascript:click_download_btn()"/>
            </div>
        </div>
     </div>
 </div>

{% endblock content %}

<!-- SCRIPT
  =====================================================================-->

{% block extra_js %}
<script>
function download_app() {
    let using_wechat = is_wechat();
    if (using_wechat) {
        let tips = create_open_with_browser_tips();
        document.body.appendChild(tips);
    } else {
        window.location =  '#download_section';
    }
}

function click_get_sms_code_btn() {
    const mobile = $('#mobile').val();
    if (!/^\d+$/.test(mobile)) {
        alert("无效的手机号码！");
        return;
    }

    // 隐藏获取验证码按钮
    $('#fetch_sms_button').hide();
    setTimeout(() => {
        $('#fetch_sms_button').show();
    }, 60 * 1000);

    let url = '{% url 'mweb:api_fetch_smscode' %}';
    let data = {
        'mobile': mobile,
    };
    my_ajax(url, data, '', '', () => {
        show_toast('验证码已发送');
        console.log('send');
    });
}

function click_download_btn() {
    const mobile = $('#mobile').val();
    if (!/^\d+$/.test(mobile)) {
        alert("无效的手机号码！");
        return;
    }

    const sms_code = $('#sms_code').val();
    if (!/^\d+$/.test(sms_code)) {
        alert("无效的手机验证码!");
        return;
    }

    let url = '{% url 'mweb:api_user_register' %}';
    let data = {
        'mobile': mobile,
        'sms_code': sms_code,
        'app': '{{ app }}',
        'channel': '{{ channel }}',
    };
    my_ajax(url, data, '', '', () => {
        if (is_ios_device()) {
            show_toast('开始下载iOS版本');
            window.location = '{{ ios_download_url }}';
        } else {
            show_toast('开始下载Android版本');
            window.location = '{{ android_download_url }}';
        }
    });
}
</script>
{% endblock extra_js %}
